<template>
	<view>
		<!-- 折扣商品的支付 -->
		<uni-nav-bar :fixed="true" left-icon="back" title="支付中心" @clickLeft="leftBack" background-color="#318cff" color="#fff"></uni-nav-bar>
		<view class="dfj-bg-white dfj-pd-30 dfj-t-c">
			<view class="dfj-t-danger">￥<text style="font-size: 50rpx;" v-if="orderMoney">{{ orderMoney | filtersNum }}</text></view>
			<view class="dfj-f-26 dfj-t-999">请尽快支付</view>
		</view>
		<view class="dfj-mg-t-20 dfj-pd-lr-20">
			<view>
				<text class="dfj-inline-block dfj-bg-white dfj-pd-lr-30 dfj-pd-tb-10 dfj-bd-t-l-radius-20 dfj-bd-t-r-radius-20 dfj-t-base">请尽快支付</text>
			</view>
			<view class="dfj-bg-white dfj-bd-b-l-radius-20 dfj-bd-b-r-radius-20 dfj-bd-t-r-radius-20">
				<radio-group @change="radioChange">
					<label class="dfj-pd-20 dfj-bd-b-e5e dfj-block dfj-flex dfj-flex-ai-c" v-for="(item, index) in items" :key="item.value">
						<view class="">
							<image :src="item.url" style="width: 60rpx;height: auto;" mode="widthFix"></image>
						</view>
						<view class="dfj-flex-1 dfj-pd-lr-30 dfj-t-666">
							 {{item.name}}<block v-if="item.value == 1"><text class="dfj-f-20 dfj-t-666 dfj-mg-l-20">({{ loginInfo.userInfo.account.wallet }})</text></block>
						</view>
						<view>
							<radio :value="item.value" :checked="item.value === pay_type" />
						</view>
					</label>
				</radio-group>
				<view class="pay-fixed dfj-flex dfj-flex-ai-c dfj-pd-lr-20 dfj-pd-tb-15">
					<button class="pay-bottom" type="primary" @click="payOpen()">请选择支付方式</button>
				</view>
			</view>
			
			<uni-popup ref="popup" type="bottom">
				<view class="dfj-bg-white">
					<view class="dfj-pd-30 dfj-t-c">
						<view class="dfj-t-666 dfj-f-28">请输入交易密码</view>
						<view class="dfj-pd-tb-30 dfj-f-35 dfj-t-999">支付：<text class="dfj-t-danger">￥{{ orderMoney | filtersNum }}</text></view>
						<view class="code-box">
							<block v-for="(item, index) in 6" :key="index">
								<view class="code-box-item">{{ (password[index] && '●') || '' }}</view>
							</block>
						</view>
					</view>
					<view class="keyboard">
						<block v-for="(item, index) in 9" :key="index">
							<view class="keyboard-item" @tap="key(index + 1)">{{index + 1}}</view>
						</block>
						<view class="keyboard-item hide"></view>
						<view class="keyboard-item" @tap="key(0)"><text>0</text></view>
						<view class="keyboard-item delte" @tap="del()"><image style="width: 60rpx;height: auto;" mode="widthFix" src="/static/img/home/del.png" :lazy-load="true"></image></view>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: [{
					url:'/static/img/home/wallet.png',
						value: '1',
						name: '方糖'
					},
					{
					url:'/static/img/home/Alipay.png',
						value: '7',
						name: '支付宝'
					},
					{
					url:'/static/img/home/WeChat.png',
						value: '8',
						name: '微信'
					}
				],
				pay_type: 0,
				password: '',
				loginInfo: '',
				orderMoney: '199'
			}
		},
		filters: {
			filtersNum(val) {
				if(val){
					return Number(val).toFixed(2)
				}else{
					return val
				}
			}
		},
		onLoad(options) {
			this.loginInfo = JSON.parse(localStorage.getItem('loginInfo'))
			if(options.orderNo){
				this.isPay(options.orderNo)
			}
		},
		methods: {
			leftBack() {
				uni.navigateBack();
			},
			radioChange: function(evt) {
				this.pay_type = evt.target.value
			},
			payOpen(){
				if(this.pay_type == 1){
					if(this.loginInfo.userInfo.setPayPwd == 0){
						uni.showToast({
							title: '请先去设置支付密码',
							icon: 'none'
						})
						setTimeout(()=>{
							uni.hideToast();
							uni.navigateTo({
								url: '/pages/my/set-payment-code'
							})
						},1000)
						return false;
					}
					this.$refs.popup.open()
				}else if(this.pay_type == 7){
					console.log("支付宝支付")
					this.$http({
						url: '/order/unificationPay',
						data: {
							payOrderType: 1,
							payType: this.pay_type,
						},
						dataType: 'json'
					}).then(res=> {
						if(res.msg && res.flag == false){
							/* uni.showToast({
								title: res.msg,
								icon: 'none'
							}) */
						}else{
							let divForm = window.document.getElementsByTagName('divform')
							if (divForm.length) {
							  window.document.body.removeChild(divForm[0])
							}
							 const div=window.document.createElement('divform');
							 div.innerHTML=res; // data就是接口返回的form 表单字符串
							 
							 window.document.body.appendChild(div);
							uni.showModal({
							    title: '提示',
							    content: '是否去支付？',
							    success: (res)=> {
							        if (res.confirm) {
																  window.document.forms[0].setAttribute('target', '_blank') // 新开窗口跳转
																  window.document.forms[0].submit();
							        } else if (res.cancel) {
							            console.log('取消');
							        }
							    }
							});
						}
					})
				}else if(this.pay_type == 8){
					console.log('微信支付')
					this.$http({
						url: '/order/unificationPay',
						data: {
							payOrderType: 1,
							payType: this.pay_type,
						},
						dataType: 'json'
					}).then(res=> {
						//window.open(res.data)
						//window.location.href = res.data;
						if(res.msg && res.flag == false){
							/* uni.showToast({
								title: res.msg,
								icon: 'none'
							}) */
						}else{
							uni.showModal({
							    title: '提示',
							    content: '是否去支付？',
							    success: (res1)=> {
							        if (res1.confirm) {
										window.open(res.data)
							        } else if (res1.cancel) {
							            console.log('取消');
							        }
							    }
							});
						}
					})
				}
			},
			isPay(orderNo){
				uni.showModal({
				    title: '提示',
				    content: '是否已支付?',
					showCancel: false,
				    success: (res)=> {
				        if (res.confirm) {
							console.log("确定")
							this.$http({
								url: '/order/queryOrderPayStatus',
								data: {
									orderNo: orderNo
								},
								method: 'GET'
							}).then(res1=> {
								console.log(res1)
								if(res1.data == 1){
									uni.navigateTo({
									    url: '/pages/my/pay-success'
									});
								}else{
									uni.showToast({
										title: '支付失败或未支付请重新支付',
										icon: 'none'
									})
								}
							})
				        }
				    }
				});
			},
			key(key) {
				if (this.password.length < 6) {
					this.password += key;
					if (this.password.length == 6) {
						
						this.$http({
							url: '/order/unificationPay',
							data: {
								payOrderType: 1,
								payType: this.pay_type,
								payPwd: this.password
							},
							dataType: 'json'
						}).then(res=> {
							if(res.flag){
								uni.showToast({	title: '支付成功' });
								uni.navigateTo({
								    url: '/pages/my/pay-success'
								});
								this.password = ''
							}else{
								this.password = ''
							}
						})
					}
				}
			},
			del() {
				if (this.password.length > 0) {
					this.password = this.password.substring(0, this.password.length - 1);
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.pay-fixed{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		z-index: 9;
		.pay-bottom{
			background: #318CFF;
			border-radius: 60rpx;
			vertical-align: top;
			width: 100%;
		}
	}
	
	.keyboard{
		background: #EBEBEB;
		display: flex;
		justify-content: center;
		z-index: 2;
		flex-wrap: wrap;
		transition:all 0.2s ease-in 0.2s;
	}
	.keyboard-item {
		box-sizing: border-box;
		width: 250rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: #fff;
		font-size: 40rpx;
		color: #333;
		height: 99rpx;
		border: 1rpx solid #EBEBEB;
		border-top:none;
		border-left:none;
	}
	.hide {
		opacity: 0;
	}
	.delte {
		background: none;
		box-shadow: none;
	}
	.code-box {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		border: 1px solid #d0d0d0;
	}
	.code-box-item {
		width: 86rpx;
		height: 86rpx;
		background: #fff;
		font-size: 40rpx;
		line-height: 86rpx;
		text-align: center;
		flex: 1;
		border: 1rpx solid #e5e5e5;
	}
</style>
